<script setup lang="ts">
import { ref, computed,onMounted, onUnmounted } from 'vue'
import { grammarList } from './data/data.js'

type Grammar = {
  意思: string[]
  用法: string[]
  例句: string[]
}
const grammars: Grammar[] = grammarList
const index = ref<number>(0)
const curGrammar = computed(() => grammars[index.value])
const isShowMap = {
  example: true,
  mean: true,
  usage: true,
}

const textMapping = {
  example:"例句",
  mean:"意思",
  usage:"用法",
}
const next = ()=>{
  if(index.value<grammars.length){
    index.value++
  }
}
const pre = ()=>{
  if(index.value>0){
    index.value--
  }
}
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'ArrowLeft') {
    pre();
  } else if (e.key === 'ArrowRight') {
    next();
  }
};
onMounted(() => {
  window.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown);
});
</script>

<template>
  <div>
    <header>
      <div style="display: flex; justify-content: center">
        <button>本课收藏单词</button>
        <button>全局收藏单词</button>
      </div>
      <div style="display: flex; justify-content: center">
        <span> 请选择第几课 </span>
        <input type="text" placeholder="请输入课程编号" />
        <span>确定</span>
      </div>
    </header>
    <body>
      <!-- 例句 -->
      <div>
        <div v-for="(例句, i) in curGrammar?.例句" :key="i">
          <div v-html="例句"></div>
        </div>
      </div>
      <!-- 意思 -->
      <div>
        <div v-for="(意思, i) in curGrammar?.意思" :key="i">
          {{ 意思 }}
        </div>
      </div>
      <!-- 用法 -->
      <div>
        <div v-for="(用法, i) in curGrammar?.用法" :key="i">
          {{ 用法 }}
        </div>
      </div>
    </body>
    <tail>
      <div >
        <button @click="pre">上一个</button>
        <button  @click="next">下一个</button>
      </div>
    </tail>
  </div>
</template>

<style scoped lang="scss"></style>
